<template>
  <div class="scanAction">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">扫码操作</x-header>
    <div class="topHolder"></div>
    <group>
      <cell title="您所在房台号" :value="choosenTableText" ></cell>
    </group>
    <group title="你可以：">
      <card>
        <div class="card-padding" slot="content">
          <grid :cols="2" style="text-align: center;">
            <grid-item :link="{name:'选择要取酒水',params:{tableId:paramTableId}}">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiu11"></use>
              </svg><br/>
              <span>取出存酒</span>
            </grid-item>
            <grid-item @click.native="showActionsheet = true">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon-test"></use>
              </svg><br/>
              <span>呼叫服务</span>
            </grid-item>
          </grid>
          <group-title>呼叫服务可【呼叫存酒】、【呼叫服务】、【投诉建议】</group-title>
        </div>
      </card>
    </group>
    <group title="呼叫服务列表：">
      <div class="callList">
        <a v-for="(item,index) in callList" :key="index">
          <form-preview class="formPreviewList label" :class="[getStateClass(item.type)]" :header-label="'呼叫次数：' + item.CALL_COUNT" :header-value="getState(item.type)" :body-items="getBody(item)" :footer-buttons="callListButton" :name="item"></form-preview>
        </a>
        <div class="listNoItem" v-if="callList.length <= 0">暂无呼叫消息</div>
      </div>
    </group>
    <actionsheet v-model="showActionsheet" :menus="actionsheetMenu" @on-click-menu="actionsheetClick" show-cancel></actionsheet>
  </div>
</template>

<script>
  import '../../assets/iconfont/iconfont'
  import { Group, GroupTitle, Cell, Card, Grid, GridItem, FormPreview, Actionsheet } from 'vux'
  import {getChoosenTable,getCallList,callAgain} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'scanAction',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        choosenTableText:'',
        paramTableId:this.$route.params.tableId,
        callList:[],
        count:60,
        callListButton:[{
          style: 'primary',
          text: '再次呼叫',
          onButtonClick: (name) => {
            this.call(name)
          }
        }],
        showActionsheet:false,
        actionsheetMenu:[
          {label: '呼叫存酒',type: 'Default',value: 'callKeep'},
          {label: '呼叫服务',type: 'Default',value: 'callService'},
          {label: '投诉建议',type: 'Default',value: 'complaint'}
        ]
      }
    },
    components:{
      Group,
      GroupTitle,
      Cell,
      Card,
      Grid,
      GridItem,
      FormPreview,
      Actionsheet
    },
    computed:{

    },
    methods:{
      goToPage(){
        this.$router.push({path:'/callServices'})
      },
      actionsheetClick(key, item) {
        //console.log(key, item)
        if(key == 'callKeep'){
          this.$router.push({name:'呼叫存酒详情',params:{tableId:this.paramTableId}})
        }else if(key == 'callService'){
          this.$router.push({name:'呼叫服务详情',params:{tableId:this.paramTableId}})
        }else if(key == 'complaint'){
          this.$router.push({name:'投诉建议详情',params:{tableId:this.paramTableId}})
        }
      },
      countDown() {
        if (this.count == 0) {
          this.count = 60
          this.callListButton = [{
            style: 'primary',
            text: "再次呼叫",
            onButtonClick: (name) => {
              this.call(name)
            }
          }]
          return false
        } else {
          this.count--
          this.callListButton = [{
            style: 'default',
            text: "再次呼叫(" + this.count + ")...",
            onButtonClick: (name) => {
            }
          }]
        }
        let countDown = this.countDown
        setTimeout(function() {
          countDown();
        },1000);
      },
      call(item){
          callAgain(item.CALLSERVICE_ID).then((res)=>{
            if(res.status == 'success'){
              getCallList().then((res)=>{
                if(res.status == 'success'){
                  this.countDown()
                  message({message:'呼叫成功',type:'success'})
                  this.callList = res.data
                }else if(res.status == 'error') {
                  message({message:res.msg,type:'error'})
                  console.log('getCallList error info:', res.msg)
                }
                this.loadingStatus = false
              }).catch((err)=>{console.log('getCallList catch info:',err)})
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('callAgain error info:', res.msg)
            }
          }).catch((err)=>{console.log('callAgain catch info:',err)})
      },
      getState(state){
        switch (state) {
          case 1:return '存酒';break
          case 2:return '服务';break
          case 3:return '投诉建议';break
          default:return '无状态';break
        }
      },
      getStateClass(state){
        switch (state) {
          case 1:return 'orange';break
          case 2:return 'green';break
          case 3:return 'red';break
          default:return 'gray';break
        }
      },
      getBody(item){
        let list = []
        //list.push({label:'呼叫编号',value:item.callNumber})
        list.push({label:'最近呼叫时间',value:item.REQUEST_DATETIME})
        return list
      }
    },
    mounted(){
      Promise.all([getChoosenTable(this.paramTableId),getCallList()]).then((res)=>{
        if(res[0].status == 'success'){
          this.choosenTableText = res[0].data.AREA + '-' + res[0].data.NUMBER + '（' + res[0].data.ROOM_PLATFORM_TYPE + '）'
        }else if(res[0].status == 'error') {
          message({message:res[0].msg,type:'error'})
          console.log('getChoosenTable error info:', res[0].msg)
        }
        if(res[1].status == 'success'){
          this.callList = res[1].data
        }else if(res[1].status == 'error') {
          message({message:res[1].msg,type:'error'})
          console.log('getCallList error info:', res[1].msg)
        }
      }).then(()=>{
        this.loadingStatus = false
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getChoosenTable catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .scanAction{
    .icon{width: 3.5em; height: 3.5em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
    .callList{
      .formPreviewList {margin-bottom: 1rem;}
    }
  }
</style>
